// 高阶组件:本质是一个组件，接收一个组件作为参数，返回一个新的组件
import { Component } from "react";

// 高阶组件使用方式

// 高阶组件缺点
// 1.笨重难以理解
// 2.容易造成嵌套地狱（wrapper）
// 3.对ts类型化不支持

const SuitHoc=WrapComponent=>{
// 1.属性代理 增强组件能力
    // return class W extends Component{
    //     state={
    //         weapon:'盒子',
    //         skill:'袋子',
    //         nickname:'花'
    //     }
    //     render(){
    //         <fieldset>
    //             <legend>礼盒包装</legend>
    //             <WrapComponent {...this.state}/>
    //         </fieldset>
    //     }
    // }

// 2.反向继承 高阶组件可以复用组件的属性
return class W extends WrapComponent{
    // state={
    //     weapon:'盒子',this.state
    //     skill:'袋子',
    //     nickname:'花'
    // }
    render(){
        console.log(this.state);
        <fieldset>
            <legend>礼盒包装</legend>
            <WrapComponent />
        </fieldset>
    }
}
}

export default SuitHoc